<template>
  <div class="tl-wrap clear-float">
    <div class="card-item">
      <div class="card-title">
        支出结构
      </div>
      <div class="card-main">
        <common-pieNew-chart ref="incomePie" :config='incomePieConfig'></common-pieNew-chart>
      </div>
    </div>
    <div class="mini-card-box">
      <div class="mini-card-item">
        <p class="title">
          <span class="title-block" style="background:#3EA2FE;"></span>一般公共预算支出
        </p>
        <div class="m-card-body">
          <!-- <div class="chart-box">
            <common-liquid-chart ref="publicLiquid" :config="publicLiquidConfig"></common-liquid-chart>
          </div>
          <div class="box-center" style="color: #6BEEFF;">累计完成</div> -->
          <div class="desc-box">
            <p class="txt">本月支出（万元）</p>
            <p class="num">{{publicOutcome.monthOutcome}}</p>
            <p class="txt">上年同期<span>{{publicOutcome.lastOutcome}}万元</span></p>
          </div>
          <div class="desc-box">
            <p class="txt">累计支出（万元）</p>
            <p class="num">{{publicOutcome.totalOutcome}}</p>
            <p class="txt">同比增长<span>{{publicOutcome.rate}}%</span></p>
          </div>
        </div>
      </div>
      <div class="mini-card-item">
        <p class="title">
          <span class="title-block" style="background:#6C43F7;"></span>政府性基金预算支出
        </p>
        <div class="m-card-body">
          <!-- <div class="chart-box">
            <common-liquid-chart ref="fundLiquid" :config="fundLiquidConfig"></common-liquid-chart>
          </div>
          <div class="box-center" style="color: #6C43F7;">累计完成</div> -->
          <div class="desc-box">
            <p class="txt">本月支出（万元）</p>
            <p class="num">{{govOutcome.monthOutcome}}</p>
            <p class="txt">上年同期<span>{{govOutcome.lastOutcome}}万元</span></p>
          </div>
          <div class="desc-box">
            <p class="txt">累计支出（万元）</p>
            <p class="num">{{govOutcome.totalOutcome}}</p>
            <p class="txt">同比增长<span>{{govOutcome.rate}}%</span></p>
          </div>
        </div>
      </div>
      <!-- <div class="mini-card-item">
        <p class="title">
          <span class="title-block" style="background:#EDA652;"></span>国有资本经营预算
        </p>
        <div class="m-card-body">
          <div class="chart-box">
            <common-liquid-chart ref="govLiquid" :config="govLiquidConfig"></common-liquid-chart>
          </div>
          <div class="desc-box">
            <p class="txt">累积支出（万元）</p>
            <p class="num">{{govLiquidConfig.totalPay}}</p>
            <p class="txt">同比增长<span>{{govLiquidConfig.lastEquals}}%</span></p>
          </div>
        </div>
      </div>
      <div class="mini-card-item">
        <p class="title">
          <span class="title-block" style="background:#77F7E7;"></span>社会保险基金预算
        </p>
        <div class="m-card-body">
          <div class="chart-box">
            <common-liquid-chart ref="socialLiquid" :config="socialLiquidConfig"></common-liquid-chart>
          </div>
          <div class="desc-box">
            <p class="txt">累积支出（万元）</p>
            <p class="num">{{socialLiquidConfig.totalPay}}</p>
            <p class="txt">同比增长<span>{{socialLiquidConfig.lastEquals}}%</span></p>
          </div>
        </div>
      </div> -->
    </div>

    <div class="content-tl-r">
      <div class="card-item" style="height: 440px;">
        <div class="card-title">税收收入详情</div>
        <div class="card-item-chart">
          <!-- <common-line-chart ref="incomeLine" :config="incomeLineConfig"></common-line-chart> -->
          <common-table ref="texIncomeDetail" :config="texIncomeDetailConfig"></common-table>
        </div>
      </div>
      <div class="card-item" style="height: 440px; margin-top: 20px;">
        <div class="card-title">政府性基金预算支出结构</div>
        <div class="card-item-chart">
          <common-pieNew-chart ref="govExpendStructure" :config='govExpendStructureConfig'></common-pieNew-chart>
        </div>
      </div>
    </div>

    <div class="income-box card-item">
      <div class="card-title">分月支出情况</div>
      <div class="income-main">
        <common-line-chart ref="incomeLine" :config="incomeLineConfig"></common-line-chart>
      </div>
    </div>


  </div>
</template>
<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonLiquidChart from '@/components/common/common-liquidfill-chart.vue';
  import CommonLineChart from "@/components/common/common-line-chart.vue";
  import CommonTable from "@/components/common/common-table.vue";
  import {integerCeil} from "@/util/util"
  import CountTo from '@/components/count-to'
  export default {
    name: "contentTL",
    components: {
      CommonPieNewChart,
      CommonLiquidChart,
      CommonLineChart,
      CommonTable,
      CountTo
    },
    data() {
      return {
        incomePieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'tl-incomePie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7'],
            legend: {
              show: true,
              x: "center",
              y: "bottom",
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              padding: 10,
              data: ['一般公共预算支出', '政府性基金预算支出']
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [60, 110],
              center: ['50%', '40%'],
              label: {
                formatter: '{d}%',
                fontSize: 22
              },
              data: [{
                  value: null,
                  name: '一般公共预算支出'
                },
                {
                  value: null,
                  name: '政府性基金预算支出'
                }
              ]
            }]
          }
        },
        publicOutcome:{},
        govOutcome:{},
        publicLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: "tl-publicLiquid",
            color: "#3EA2FE",
            value: null
          },
        },
        fundLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: "tl-fundLiquid",
            color: "#6C43F7",
            value: null
          },
        },
        govLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: "tl-govLiquid",
            color: "#EDA652",
            value: null
          },
        },
        socialLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: "tl-socialLiquid",
            color: "#62FFFF",
            value: null
          },
        },
        incomeLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'tl-incomeLine',
            yName:'(万)',
            yOffset: -5,
            x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            y: [{
              axis: {
                min: 0,
                max: 0,
              },
              title: '一般公共预算支出',
              data: [],
              color: "#3EA2FE",
            }, {
              title: '政府性基金预算支出',
              data: [],
              color: "#6C43F7",
            }]
          }
        },
        govExpendStructureConfig:{
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'govExpendStructurePie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7', '#FDD100', '#4BC89B'],
            series: [{
              name: '',
              type: 'pie',
              radius: [40, 90],
              center: ['50%', '50%'],
              label: {
                formatter: '{b}\n{d}%',
                fontSize: 16
              },
              data: []
            }]
          }
        },
        texIncomeDetailConfig:{
          request: {
            url: "url",
            params: {}
          },
          option: {
			id:'texIncomeDetail',
            height: 380,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "name",
              title: "收入项目",
            }, {
              prop: "month",
              title: "本月完成(万)",
              width: '125px'
            }, {
              prop: "finishRate",
              title: "累计完成(万)",
              width: '125px'
            }, {
              prop: "lastYear",
              title: "去年同期收入(万)",
              width: '165px'
            }, {
              prop: "rate",
              title: "同比(%)",
              width: '95px'
            }],
            tableData: []
          }
        },
      }
    },
    mounted() {
      this.getOutcomeTotal();
      this.getOutcomeAllyear();
      this.getGovExpendStructure();
      this.getTexDetail();
    },
    methods:{
      getOutcomeTotal() {
        this.$get(this.$api.getIncomeTotal).then(res => {
          if(res.code === 200) {
            this.publicOutcome = res.data.publicOutcome;
            this.incomePieConfig.option.series[0].data[0].value = res.data.publicOutcome.totalOutcome;

            this.govOutcome = res.data.govOutcome;
            this.incomePieConfig.option.series[0].data[1].value = res.data.govOutcome.totalOutcome;

            // this.govLiquidConfig.totalPay = res.data.nationalCapitalOutcome.totalPay;
            // this.govLiquidConfig.lastEquals = res.data.nationalCapitalOutcome.lastEquals;
            // this.govLiquidConfig.option.value = (res.data.nationalCapitalOutcome.rate/100).toFixed(4);
            // this.incomePieConfig.option.series[0].data[2].value = res.data.nationalCapitalOutcome.rate;

            // this.socialLiquidConfig.totalPay = res.data.societyFoundOutcome.totalPay;
            // this.socialLiquidConfig.lastEquals = res.data.societyFoundOutcome.lastEquals;
            // this.socialLiquidConfig.option.value = (res.data.societyFoundOutcome.rate/100).toFixed(4);
            // this.incomePieConfig.option.series[0].data[3].value = res.data.societyFoundOutcome.rate;

            // this.$refs.publicLiquid.initChart();
            // this.$refs.fundLiquid.initChart();
            // this.$refs.govLiquid.initChart();
            // this.$refs.socialLiquid.initChart();

            this.$refs.incomePie.initChart();


          }
        })
      },
      getOutcomeAllyear() {
        this.$get(this.$api.getOutcomeAllyear).then(res => {

          let publicList = res.data[0].publicOutcome.map(item => {
            return item.monthPay;
          });
          let govList = res.data[0].govFoudOutcome.map(item => {
            return item.monthPay;
          });
          let capitalList = res.data[0].nationalCapitalOutcome.map(item => {
            return item.monthPay;
          });
          let social = res.data[0].societyFoundOutcome.map(item => {
            return item.monthPay;
          });

          let max = Math.max(...publicList,...govList,...capitalList,...social);
          max = integerCeil(max);

          this.incomeLineConfig.option.y[0].axis.max = max;
          this.incomeLineConfig.option.y[0].data = publicList;
          this.incomeLineConfig.option.y[1].data = govList;
          // this.incomeLineConfig.option.y[2].data = capitalList;
          // this.incomeLineConfig.option.y[3].data = social;

          this.$refs.incomeLine.initChart();
        })
      },
      getGovExpendStructure(){
        this.$get(this.$api.getGovExpend).then(res => {
          if (res.code == 200) {
            res.data.map( item => {
              this.govExpendStructureConfig.option.series[0].data.push({
                name:item.name,
                value:item.rate
              })
            })
            this.$refs.govExpendStructure.initChart();
          }
        });
      },
      getTexDetail(){
        this.$get(this.$api.getTaxIncomDetail).then(res => {
          if (res.code == 200) {
            this.texIncomeDetailConfig.option.tableData = res.data;
          }
          this.$refs.texIncomeDetail.initTable();
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .tl-wrap {
      display: inline-block;
      width: 1881px;
  }

  .card-title {
    margin-left: 17px;
  }

  .card-main {
    height: 436px;
    padding: 20px;
    box-sizing: border-box;
  }

  .mini-card-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 620px;
    margin-left: 20px;
    float: left;

    .mini-card-item {
      position: relative;
      flex: none;
      width: 100%;
      height: 235px;
      background: rgba(14, 44, 74, 0.3);
      margin-bottom: 20px;

      .title {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: rgba(233, 244, 255, 1);
        padding: 20px 0 0 30px;
      }

      .title-block {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
  }

  .m-card-body {
    display: flex;

    .chart-box {
      width: 120px;
      height: 120px;
      margin: 30px 0 0 30px;
    }

    .box-center {
      padding-top: 80px;
      padding-left: 10px;
    }

    .desc-box {
      flex: 1;
      margin-left: 80px;
      padding-top: 25px;

      .txt {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(107, 238, 255, 1);
        margin-bottom: 20px;

        >span {
          color: #fff;
          margin-left: 15px;
        }
      }

      .num {
        font-size: 44px;
        font-family: Digitalism;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 38px;
        margin-bottom: 20px;
      }
    }
  }

  .mini-card-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: url("../../../assets/imgs/card-bottom.png") no-repeat;
    background-size: 100%;
  }

  .income-box {
    width: 1250px;
    background: rgba(14, 44, 74, 0.3);
    position: relative;

    .income-main {
      height: 336px;
      padding: 20px;
      box-sizing: border-box;
    }
  }

  .content-tl-r {
    width: 610px;
    height: 900px;
    float: right;
  }
</style>
